import { useWindowSize } from '@vueuse/core'
import { ref, onMounted, onUnmounted } from 'vue'

export function viewAdapter() {
  const itemWidth = ref(0)

  function getItemWidth() {
    const { width } = useWindowSize()
    itemWidth.value = (150 / 375) * width.value
  }

  onMounted(() => {
    getItemWidth()
    window.addEventListener('resize', getItemWidth)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', getItemWidth)
  })

  return {
    itemWidth
  }
}
